<template>
  <div class="content">
    <div ref="charts" style="width: 100%; height: 1300px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import zhongguo from "@/assets/data-city.json";
import beijing from "@/assets/data-beijing.json";

export default {
  created() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },
  data() {
    return {
      data: [
        { name: "朝阳区", value: [116.54, 39.92, 13097] },
        { name: "顺义区", value: [116.66, 40.13, 4707] },
        { name: "通州区", value: [116.66, 39.91, 4077] },
        { name: "西城区", value: [116.73, 40.04, 3045] },
        { name: "丰台区", value: [116.29, 39.85, 4035] },
        { name: "东城区", value: [116.42, 39.93, 5046] },
        { name: "昌平区", value: [116.23, 40.22, 1023] },
        { name: "大兴区", value: [116.34, 39.72, 304] },
        { name: "海淀区", value: [116.3, 39.96, 2304] },
        { name: "平谷区", value: [117.12, 40.14, 4302] },
        { name: "石景区", value: [116.4, 39.9, 4305] },
        { name: "门头沟区", value: [116.1, 39.92, 1023] },
        { name: "怀柔区", value: [116.63, 40.3, 6504] },
        { name: "经开区", value: [116.51, 39.77, 4302] },
        { name: "密云区", value: [116.83, 40.38, 3045] },
        { name: "延庆区", value: [115.98, 40.43, 4056] },
        { name: "房山区", value: [116.13, 39.72, 6045] },
      ],
    };
  },
  methods: {
    initCharts() {
      const charts = echarts.init(this.$refs["charts"]);
      // ...
      // 注意这里是echarts的实例对象，而不是echarts组件本身。
      charts.on("click", ({ name }) => {
        if (name === "北京市") {
          // 修改option的配置，可以继续自定义
          option.geo.zoom = 0.8;
          // 就像上面提到的，这里必须要和注册地图时的名字一致
          option.geo.map = "beijing";
          // 注册地图
          echarts.registerMap("beijing", beijing);
          // 重新渲染
          charts.setOption(option, true);
        }
      });
      charts.on("click", ({ name }) => {
        const [mapName, mapJson] = getMap(name);
        option.geo.zoom = 0.8;
        option.geo.map = mapName;
        // 为了重新定位，这里使用了length
        const idx = option.graphic.length + 1;
        option.graphic.push({
          type: "text",
          left: `${idx * 10}%`,
          top: "10%",
          style: {
            text: name,
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            fill: "#fff",
          },
        });
        echarts.registerMap(mapName, mapJson);
        charts.setOption(option, true);
      });

      const option = {
        // 背景颜色
        // backgroundColor: "#404a59",
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          backgroundColor: "#0C121C",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "red",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 100,
        },
        // 地图配置
        geo: {
          map: "china",
          roam: true,
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: "rgb(0, 105, 149)",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "greenyellow",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },

        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin",
            legendHoverLink: true,
            symbolSize: [60, 60],
            // 这里渲染标志里的内容以及样式
            label: {
              show: true,
              formatter(value) {
                return value.data.value[2];
              },
              color: "#fff",
            },
            // 标志的样式
            itemStyle: {
              normal: {
                color: "rgba(255,0,0,.7)",
                shadowBlur: 2,
                shadowColor: "D8BC37",
              },
            },
            // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
            // 至于如何展示，完全是靠上面的formatter来自己定义的
            data: [
              { name: "朝阳区", value: [116.54, 39.92, 1397] },
              { name: "顺义区", value: [116.66, 40.13, 477] },
              { name: "通州区", value: [116.66, 39.91, 477] },
              { name: "西城区", value: [116.73, 40.04, 345] },
              { name: "丰台区", value: [116.29, 39.85, 435] },
              { name: "东城区", value: [116.42, 39.93, 546] },
              { name: "昌平区", value: [116.23, 40.22, 123] },
              { name: "大兴区", value: [116.34, 39.72, 34] },
              { name: "海淀区", value: [116.3, 39.96, 234] },
              { name: "平谷区", value: [117.12, 40.14, 432] },
              { name: "石景区", value: [116.4, 39.9, 435] },
              { name: "门头沟区", value: [116.1, 39.92, 123] },
              { name: "怀柔区", value: [116.63, 40.3, 654] },
              { name: "经开区", value: [116.51, 39.77, 432] },
              { name: "密云区", value: [116.83, 40.38, 345] },
              { name: "延庆区", value: [115.98, 40.43, 456] },
              { name: "房山区", value: [116.13, 39.72, 645] },
            ],
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            zlevel: 1,
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            effectType: "ripple",
            showEffectOn: "render",
            rippleEffect: {
              period: 10,
              scale: 10,
              brushType: "fill",
            },
            label: {
              show: true,
              formatter(value) {
                return value.data.value[2];
              },
              color: "#fff",
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "rgba(255, 235, 59, .7)",
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            zlevel: 1,
            data: [
              { name: "朝阳区", value: [116.54, 39.92, 13097] },
              { name: "顺义区", value: [116.66, 40.13, 4707] },
              { name: "通州区", value: [116.66, 39.91, 4077] },
              { name: "西城区", value: [116.73, 40.04, 3045] },
              { name: "丰台区", value: [116.29, 39.85, 4035] },
              { name: "东城区", value: [116.42, 39.93, 5046] },
              { name: "昌平区", value: [116.23, 40.22, 1023] },
              { name: "大兴区", value: [116.34, 39.72, 304] },
              { name: "海淀区", value: [116.3, 39.96, 2304] },
              { name: "平谷区", value: [117.12, 40.14, 4302] },
              { name: "石景区", value: [116.4, 39.9, 4305] },
              { name: "门头沟区", value: [116.1, 39.92, 1023] },
              { name: "怀柔区", value: [116.63, 40.3, 6504] },
              { name: "经开区", value: [116.51, 39.77, 4302] },
              { name: "密云区", value: [116.83, 40.38, 3045] },
              { name: "延庆区", value: [115.98, 40.43, 4056] },
              { name: "房山区", value: [116.13, 39.72, 6045] },
            ],
          },
          {
            type: "map",
            // roam: true,
            // zoom: 1,
            geoIndex: 0,
            // label: {
            // //   // 通常状态下的样式
            // //   normal: {
            // //     show: true,
            // //     textStyle: {
            // //       color: "#fff",
            // //     },
            // //   },
            //   // 鼠标放上去的样式
            //   emphasis: {
            //     textStyle: {
            //       color: "#640000",
            //     },
            //   },
            // },
            data: this.data,
          },
        ],

        graphic: [
          {
            type: "text",
            left: "5%",
            top: "30%",
            style: {
              text: "中国",
              font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
              fill: "#fff",
            },
          },
        ],
        visualMap: {
          // 是否展示左下角，即是是false，也仅是不显示，不影响数据的映射
          show: true,
          // 上下端文字
          text: ["高", "低"],
          // 最小值和最大值，必须指定
          min: 0,
          max: 6000,
          // 位置
          left: "10%",
          bottom: "30%",
          // 是否展示滑块
          calculable: true,
          // 指定映射的数据，对应的是option.series，这里根据自己的实际需要进行配置
          seriesIndex: [2],
          // 从下到上的颜色
          inRange: {
            color: ["#00467F", "#A5CC82"],
          },
          //字体颜色
          textStyle: {
            color: "#fff",
            map: "china",
          },
        },
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("china", zhongguo);

      charts.setOption(option);
    },
  },
};
</script>
